<!--
 * @Author: wjk
 * @Date: 2019-12-31 13:25:52
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-27 09:52:16
 * @description: file content
 -->
<template>
  <view :class="'page-container ' + className" :style="styleText" @touchstart="touchstart">
    <view v-if="couponFlag" class="coupon-box" :style="'background: url('+couponBg+') 0;background-size: cover;top:' +marginTop" @touchmove.stop="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend" @click.stop="toCoupon">
      <view class="coupon-box-left">
        <view>
          <image class="coupon-icon" src="/static/images/commodity/coupon_img.png" mode="aspectFit"></image>
        </view>
        <view class="coupon-text">
          <view class="coupon-text-title">{{ couponData.title }}</view>
          <view class="coupon-text-subtitle">{{ couponData.subTitle }}</view>
        </view>
      </view>
      <view class="coupon-box-right">
        <text>{{ (!couponData.inpageData)?'查看':'使用' }}</text>
        <image class="right-arrow" src="/static/images/commodity/coupon_right_arrow.png" mode="aspectFit"></image>
      </view>
    </view>
    <slot></slot>
    <c-global />
    <tab v-if="showTab" @tabClick="tabClick" />
    <view v-if="showBackBtn && showToTop" class="back-icon" @click="handleBackTop">
      <image src="/static/images/icon/icon_to_top.png" />
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import Tab from '@/components/tab/tab'
import { throttle } from '@/utils/tools'
import { toFunctionDetail } from '@/utils/navigateTo'
export default {
  name: 'BasePageView',
  components: {
    Tab
  },
  props: {
    className: {
      type: String,
      default: ''
    },
    styleText: {
      type: String,
      default: ''
    },
    showToTop: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      flag: 0, // 0没有滑动,1向左滑动,2向右滑动,3向上滑动 4向下滑动
      lastX: 0,
      lastY: 0,
      marginTop: '6rpx',
      couponBg: `${process.env.VUE_APP_IMAGE_ASSET}/images/commodity/coupon_bg.png`,
      myInterval: 0,
      couponData: {},
      couponFlag: false,
      showTab: false,
      showTabRoute: [
        'pages/home/index',
        'pages/coupon/index',
        'pages/live/index',
        'pages/moments/index',
        'pages/mine/index'
      ],
      showBackBtn: false,
      customPage: ['pages/home/index', 'pages/coupon/index', 'pages/secondLevel/middleWare/index', 'pages/share/index', 'pages/cart/index', 'pages/moments/search', 'pages/login/index', 'pages/login/mobile', 'pages/login/bind', 'pagesPublic/category/index', 'pages/mine/index', 'pagesOther/middle/index', 'pagesDetail/commodity/index', 'pagesDetail/schema/index', 'pagesActivity/red-packet/index', 'pagesOrder/order/index', 'pagesOrder/orderCheck/index', 'pagesOrder/orderDetail/index', 'pagesOrder/orderExpress/index', 'pagesOrder/orderSuccess/index', 'pagesOrder/orderSuccess/H5ResultGet', 'pagesCommission/box/boxDetails', 'pagesBHS/goods/index']
    }
  },
  computed: {
    ...mapState([
      'token',
      'couponTemp'
    ])
  },
  async created() {
    const currentPage = this.$prePage(1, 'route')
    this.currentPage = currentPage
    this.showTab = this.showTabRoute.includes(currentPage)
    // const page = this.$prePage(1, 'route')
    if (this.token && !this.couponTemp && currentPage !== 'pages/login/index' && currentPage !== 'pages/login/mobile') {
      if (process.env.VUE_APP_PLATFORM === 'mp-weixin') {
        if (this.customPage.indexOf(currentPage) !== -1) {
          this.marginTop = `${this.systemInfo.statusBarHeight + 44}px`
        } else {
          this.marginTop = '0'
        }
      } else {
        this.marginTop = '6rpx'
      }
      await this.fetchRemind()
      this.getRemind()
    }
    uni.$on('scroll', this.scrollShowBtn)
  },
  async activated() {
    const page = this.$prePage(1, 'route')
    if (this.token && !this.couponTemp && page !== 'pages/login/index' && page !== 'pages/login/mobile') {
      await this.fetchRemind()
      this.getRemind()
    }
  },
  deactivated() {
    clearInterval(this.myInterval)
  },
  destroyed() {
    clearInterval(this.myInterval)
  },
  methods: {
    // 是否显示
    // 跳转相应优惠页面
    toCoupon() {
      if (this.couponData.inpageData) {
        toFunctionDetail(this.couponData.inpageData)
      } else {
        this.$navigateTo('/pagesMine/coupon/index')
      }
    },
    handletouchmove: function(event) {
      if (this.flag !== 0) {
        return
      }
      const currentX = event.changedTouches[0].pageX
      const currentY = event.changedTouches[0].pageY
      const tx = currentX - this.lastX
      const ty = currentY - this.lastY
      // 左右方向滑动
      if (Math.abs(tx) > Math.abs(ty)) {
        if (tx < 0) {
          this.flag = 1 // 向左滑动
        } else if (tx > 0) {
          this.flag = 2 // 向右滑动
        }
      } else {
        if (ty < 0) {
          this.flag = 3 // 向上滑动
          this.couponFlag = false
        } else if (ty > 0) {
          this.flag = 4 // 向下滑动
        }
      }
      // 将当前坐标进行保存以进行下一次计算
      this.lastX = currentX
      this.lastY = currentY
    },
    handletouchstart: function(event) {
      this.lastX = event.changedTouches[0].pageX
      this.lastY = event.changedTouches[0].pageY
    },
    handletouchend: function(event) {
      this.flag = 0
    },
    // 轮询拉取提醒
    getRemind() {
      let times = 1
      this.myInterval = setInterval(() => {
        const that = this
        if (!that.couponFlag && !that.couponTemp && that.token && times < 6) {
          times += 1
          setTimeout(that.fetchRemind, 0)
        }
        if (times > 6 || that.couponFlag || that.couponTemp || !that.token) {
          clearInterval(that.myInterval)
        }
      }, 20000)
      this.$on('hook:deactivated', () => {
        clearInterval(this.myInterval);                                    
      })
      if (this.couponFlag || this.couponTemp) {
        setTimeout(() => {
          this.couponFlag = false
        }, 5000)
      }
    },
    // 提醒详情
    async fetchRemind() {
      if(!this.token){return}
      if (process.env.NODE_ENV === 'development') {
        return
      }
      const res = await this.$api.homeApi.getGoodsRemind()
      if (res.success && res.data) {
        this.$store.commit('SET_COUPON_TEMP', true)
        this.couponFlag = true
        this.couponData = res.data
      } else {
        this.$store.commit('SET_COUPON_TEMP', false)
        this.couponFlag = false
      }
    },
    handleBackTop() {
      this.$emit('toTop')
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    scrollShowBtn(res) {
      throttle(() => {
        if (this.currentPage !== this.$prePage(1, 'route')) {
          return
        }
        if (res.scrollTop > this.systemInfo.screenHeight / 2) {
          this.showBackBtn = true
        } else {
          this.showBackBtn = false
        }
      }, 300)()
    },
    tabClick(e) {
      this.$emit('tabClick', e)
    },
    touchstart(e) {
      this.$emit('touchstart', e)
    }

  }
}
</script>
<style scoped lang="scss">
.coupon-box {
  @include flex;
  @include j-between;
  @include a-center;
  padding: 30rpx;
  // background: url(../../static/images/commodity/coupon_bg.png) 0;
  background-size: cover;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  &-left {
    @include flex;
  }
  &-right {
    font-size: 26rpx;
    color: #E21536;
    margin-right: 60rpx;
    .right-arrow {
      width: 12rpx;
      height: 12rpx;
      margin-left: 9rpx;
    }
  }
  .coupon-icon {
    width: 101rpx;
    height: 101rpx;
  }
  .coupon-text {
    margin-left: 33rpx;
    &-title {
      color: #151515;
      font-size: 34rpx;
    }
    &-subtitle {
      color: #969394;
    }
  }
}
.back-icon {
  width: 86rpx;
  height: 85rpx;
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  bottom: calc(200rpx + constant(safe-area-inset-bottom));
  bottom: calc(200rpx + env(safe-area-inset-bottom));
  z-index: 98;
  opacity: 0;
  animation: showBtn 0.5s both;
  image {
    width: 100%;
    height: 100%;
  }
}
@keyframes showBtn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
</style>
